<!DOCTYPE html>
<html lang="en">

<head>
  <title>My BCIT Project</title>
  <meta name="comp1800 template" content="My 1800 App">

  <!-- Required meta tags -->
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
  <style>
    div h1 {
      margin-left: 50px;
      border-bottom: 1px gray solid;
      padding-bottom: 30px;
    }

    h2 {
      margin-left: 10px;
    }

    #class {
      background-color: gray;
      height: 50px;
      margin-left: 200px;

    }

    #left {
      float: left;
      margin-left: 200px;
      clear: both;
    }

    #right {
      margin-left: 450px;
      margin-bottom: 20px;
    }
    
    th{
      display:inline-block;
      margin-left: 200px;
      margin-top: 30px;
    }
   table{
    margin-bottom: 50px;
   }
   #footer{
    margin-left:200px ;
   }
   #footer span {
    padding-left: 30px;
   }
  </style>

  <!-- Bootstrap Library CSS CDN go here -->
  <!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> -->
  <!-- Boostrap Library JS CDN  go here -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> -->

  <!-- Other libraries go here -->

  <!-- Link to styles of your own -->
  <!-- <link rel="stylesheet" href="./styles/style.css"> -->

</head>


<body>
  
  <div class="container">
    <header class="d-flex justify-content-center py-3">
      <ul class="nav nav-pills">
          <li class="nav-item"><a href="index1.html" class="nav-link ">Home</a></li>
          <li class="nav-item"><a href="login.html" class="nav-link  ">Login</a></li>
          <li class="nav-item"><a href="Profile.html" class="nav-link">Profile</a></li>
          <li class="nav-item"><a href="main.html" class="nav-link">main</a></li>
          <li class="nav-item"><a href="Setting .html" class="nav-link active" aria-current="page">Setting</a></li>
          <li class="nav-item"><a href="Community.html" class="nav-link">Community</a></li>
      </ul>
    </header>
    <div>
    <h1>设置 </h1>

  </div>
  </div>
  <div id="class">
    <h2>账号管理</h2>

  </div>
  <div id="left">
    <p>通用设置</p>
  </div>
  <div id="right">
    <p>
      General settings
    </p>
  </div>
 <table>
  <tbody>
    <tr>
      <th>隐私设置</th>
      <th>priva setting</th>
    </tr>
<tr>
  <th>快捷键</th>
  <th>shorcut key</th>
</tr>
<tr>
  <th>关于</th>
  <th>about</th>
</tr>
  </tbody>
 </table>
 
  <!------------------------------>
  <!-- Your HTML Layout go here -->
  <!------------------------------>
  <!-- Stuff for body goes here -->


 <div id="footer">
  <span class="badge text-bg-primary rounded-pill">Primary</span>
  <span class="badge text-bg-secondary rounded-pill">back</span>
  <span class="badge text-bg-success rounded-pill">Success</span>
  <span class="badge text-bg-danger rounded-pill">home</span>
  
</div>

</body>

</html>